<template>
	<view class="pageItem">
		<view class="head">
			<view class="h_con">
				<image class="user_img" src="/static/my/vip_user.png"></image>
				<view class="user_msg">
					<view class="phone">{{userInfo.email}}</view>
					<view class="u_txt" v-if="hasLogin">{{$t('ach_award_tip')}}：
					<text class="b_num" style="color: #481800;">
						{{award_num}}
						<!-- 	<image class="b_logo" src="/static/other/diamond.png" mode="widthFix"></image> -->
					</text>
				
					</view>
					<view class="u_txt" v-else>{{$t('ach_not')}}</view>
				</view>
				<image class="bg" src="/static/other/vip_user_bg.png"></image>
			</view>
		</view>
		<view class="main">
			<view class="vip_msg">
				<view class="v_tit">
					<label class="tit">{{$t('ach_award')}}</label>
				</view>
				<view class="v_con">
					<image class="logo" src="/static/other/vip_msg_logo_01.png" mode="widthFix"></image>
					<view class="msg">
						<view class="m_t1">{{show_tit(cur_item)}}</view>
						<view class="m_t2">{{show_desc(cur_item)}}</view>
					</view>
				</view>
			</view>
			
			<view class="cardRotation">
			  <swiper class="swiper" circular :indicator-dots="false" :autoplay="false" :interval="3000" :duration="500"
			    @change="change_sw" previous-margin="40rpx" next-margin="40rpx">
			    <block v-for="(item,index) in list" :key="index">
			      <swiper-item>
			        <view class="cardContentFa">
			          <view class="cardContent" :style="{
			              background:'#064743'
			            }">
			            <view class="cardTop">
			              <image class="cardImage" :src="'/static/vipPage/gift.png'" />
			              <text class="cardFont">{{show_tit(item)}}</text>
			            </view>
			            <view class="cardFoot">
			              <view class="footWord">{{$t('stu')}}</view>
						  
			              <view class="footFont footWord" v-if="item.my_state == 1">{{$t('ach_stu1')}}</view>
						  <view class="footFont footWord" v-else-if="item.my_state == 2">{{$t('ach_stu2')}}</view>
						   <!-- <view class="footFont footWord" v-else-if="item.my_state == 3">{{$t('ach_stu2')}}</view> -->
						  <view class="footFont footWord" v-else>{{$t('ach_stu0')}}</view>
						  
			            </view>
			          </view>
			        </view>
			      </swiper-item>
			
			    </block>
	
			  </swiper>
			</view>

			<view class="bean_msg">
				<view class="b_con">
					<view class="b_t1">{{$t('award')}}：</view>
					<view class="b_num">{{cur_item.score||'0.00'}}</view>
					<image class="b_logo" src="/static/other/diamond.png" mode="widthFix"></image>
				</view>
			</view>
			
		</view>
		<view class="_footer">
			
			<view class="btn sub" v-if="act_btn" @click="get_gift()">{{act_btn}}</view>
			
		</view>
		<view class="bg_item"></view>
	</view>
</template>

<script>
	import { mapState} from 'vuex';
	import helper from '@/common/helper.js';
	export default {
		data() {
			return {
				is_vip:false,
				act_btn : '',
				award_num : 0,
				list : [],
				cur_item : {},
				select_type:0 ,
			}
		},
		onLoad() {
			this.initData();
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods:{
			show_tit(item){
					 let lang = this.$i18n.locale;
					 let tit = item.title;
					if(lang == 'en'){
						tit = item.title_en || tit;
					}else if(lang == 'jp'){
						tit = item.title_jp || tit;
					}
					return tit;
			},
			show_desc(item){
					 let lang = this.$i18n.locale;
					 let tit = item.remark;
					if(lang == 'en'){
						tit = item.remark_en || tit;
					}else if(lang == 'jp'){
						tit = item.remark_jp || tit;
					}
					return tit;
			},
			initData(){
				let url = this.site_url + 'api/index/ach_list';
				this.areq(url).then(res=>{
					if(res.code == 1){
						this.award_num = res.data.award_num;
						this.list = res.data.list;
						this.cur_item = this.list[0];
						let stu =  this.cur_item.my_state || 0;
						let str = 'ach_stu'+stu;
						this.act_btn = this.$t(str);
					}
				})
			},
			change_sw(e) {
			  let index = e.detail.current;
			  this.cur_item = this.list[index];
			  let stu =  this.cur_item.my_state || 0;
			  let str = 'ach_stu'+stu;
			  this.act_btn = this.$t(str);
			},
			get_gift(){
				
				//console.log(this.cur_item)
				
				let stu =  this.cur_item.my_state || 0;
				 if(stu == 1){
					uni.showModal({
						title: this.$t('system.tip17'),
						content: this.$t('system.tip18'),
						success:  (res) => {
							if (res.confirm) {
								//console.log('用户点击确定');
								uni.showLoading({
									title: this.$t('acc.loading')+'...',
									mask: true,
								});
								helper.Timer.start();
								let ach_id = this.cur_item.id;
								let url = this.site_url + 'api/auth/member/ach_handle?ach_id='+ach_id;
								this.areq(url,'POST').then(res=>{
									helper.Timer.stop();
									let left_time = helper.Timer.getLeftTime(2000);
									setTimeout(()=>{
										uni.hideLoading();
										if(res.code == 1){
											uni.$emit('auto_update');
											this.showMsg(this.$t('system.tip30'), 2000, true, 'success');
											setTimeout(()=>{
						                        this.$r('/pages/my/my','rel');
											},1500)
										}else{
											this.showMsg(res.msg);
										}
									},left_time);	
								})
								
							} else if (res.cancel) {
								//console.log('用户点击取消');
							}
						}
					});
					
					
				 }else if(stu == 2){
					   this.showMsg(this.$t('system.tip19'));
				 }else{
					  this.showMsg(this.$t('system.tip20'));
				 }
			},
			vipChange(e){
				this.select_type = e.currentTarget.dataset.index;
			}
		}
	}
</script>

<style lang="scss">
.pageItem{
	padding-bottom: 22vw;
}

    .cardRotation {
      width: 750rpx;
      height: 300rpx;
      z-index: 9;
      // position: absolute;
      // top: 216rpx;
	  margin-top: 20rpx;

      // background-color: yellow;
      .cardContentFa {
        width: 670rpx;
        padding: 0 10rpx;
      }
      .cardContent {
        width: 100%;
        height: 300rpx;
        border-radius: 16rpx;
        background-color: red;

        padding: {
          left: 50rpx;
          right: 84rpx;
          top: 30rpx;
          bottom: 40rpx;
        }

        .cardTop {
          display: flex;
          align-items: center;
          flex-direction: row;

          .cardImage {
            width: 100rpx;
            height: 100rpx;
            background-color: #CCCCCC;
            margin-right: 30rpx;
            border-radius: 60rpx;
          }

          .cardFont {
            font-size: 30rpx;
            font-weight: bold;
            color: #E9BFA1;
          }
        }
        .cardFoot {
          padding-top: 40rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .footWord {
            font-size: 26rpx;
            font-weight: bold;
            color: #FFCF96;
            background: linear-gradient(1deg, #FFD6A0 0%, #B28043 96.3623046875%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          .footFont {
            font-size: 36rpx;
          }
        }
      }
    }

.head {
	width: 100%;
	position: fixed;
	z-index: 98;
	padding: calc(var(--status-bar-height) + 4vw) 4% 3vw;
	.h_con {
		width: 100%;
		height: 18vw;
		display: flex;
		align-items: center;
		position: relative;
		padding: 2vw 4vw;
		.user_img {
			width: 12vw;
			height: 12vw;
			position: relative;
			z-index: 2;
		}
		.user_msg {
			flex: 1;
			padding: 0 3vw;
			position: relative;
			z-index: 2;
			.phone {
				width: 100%;
				display: flex;
				color: #481800;
				font-size: 4vw;
				font-weight: bold;
				align-items: center;
			}
			.b_num{
				font-size: 4.3vw;
				padding-left: 1vw;
				color: $main_color5;
				font-weight: bold;
			}
			.b_logo{
				width: 3.2vw;
				margin-left: 1vw;
			}
			.u_txt {
				font-size: 3.5vw;
				padding-top: 1.3vw;
				color: #815317;
			}
		}
		.bg{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 1;
		}
	}
}
.bg_item{
	@include bg_item(80vw,#FFE4AB,$main_bg_color);
}
.main{
	width: 100%;
	position: relative;
	z-index: 2;
	padding: calc(var(--status-bar-height) + 26vw) 4% 0;
	.vip_msg{
		@include card_style();
		background: linear-gradient(135deg, #21232B 0%, #151316 100%);
		color: #F3D19C;
		.v_tit{
			height: 10vw;
			line-height: 10vw;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			.tit{
				margin-left: 6vw;
				font-size: 4vw;
				font-weight: bold;
				text-align: center;
				position: relative;
				background: #21232B;
				padding: 0 3vw;
				z-index: 2;
			}
			&::after{
				content: '';
				width: 96%;
				height: 0.5vw;
				top: 50%;
				transform: translateY(-50%);
				position: absolute;
				z-index: 1;
				border-radius: 1vw;
				background: linear-gradient(90deg, rgba(255,228,175,0) 0,#FFE4AF 10%, rgba(255,228,175,0) 120%);
			}
			
		}
		.v_con{
			width: 100%;
			display: flex;
			align-items: center;
			padding: 0 5%;
			.logo{
				width: 8vw;
			}
			.msg{
				flex: 1;
				padding-left: 5vw;
				.m_t1{
					font-size: 3.5vw;
					font-weight: bold;
				}
				.m_t2{
					font-size: 3.2vw;
					color: #9D9D9D;
					padding-top: 1vw;
					line-height: 5vw;
				}
			}
		}
	}
	.vip_card{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 6vw;
		.v_box{
			width: 32%;
			padding: 8vw 3vw 4vw;
			background: #fff;
			border-radius: 3vw;
			border: 1rpx solid #E5E7E7;
			text-align: center;
			position: relative;
			.v_c_t1{
				width: 100%;
				font-size: 3.4vw;
				font-weight: bold;
				color: #000;
				text-align: center;
			}
			.v_c_t2{
				width: 100%;
				text-align: center;
				padding-top: 2vw;
				.num{
					font-size: 6vw;
					font-weight: bold;
					padding-left: 1vw;
				}
			}
			.bean{
				width: 5vw;
				margin-top: 3vw;
			}
			.tip{
				position: absolute;
				padding: 1vw 3vw;
				border-radius: 3vw 3vw 0 3vw;
				color: #fff;
				font-size: 2.6vw;
				background: linear-gradient(90deg, #FD7E47 0%, #E14530 100%);
				top: -1.6vw;
				right: 0;
			}
		}
		.v_box_s{
			background: linear-gradient(0deg, #ffefac 0%, #FFE8BF 100%);
			border: 1vw solid #EB452D;
		}
	}
	.bean_msg{
		width: 100%;
		margin-top: 6vw;
		display: flex;
		align-items: center;
		padding: 0 2vw;
		.b_con{
			flex: 1;
			display: flex;
			align-items: center;
			.b_t1{
				font-size: 4vw;
				color: $main_color5;
				font-weight: bold;
			}
			.b_num{
				font-size: 4.3vw;
				padding-left: 1vw;
				color: $main_color5;
				font-weight: bold;
			}
			.b_logo{
				width: 3.2vw;
				margin-left: 1vw;
			}
		}
		.b_go{
			font-size: 3.6vw;
			color: #fe9233;
			.go{
				font-size: 3.5vw;
			}
		}
	}
}
._footer{
	@include page_button();
	margin-top: 10vw;
	.btn{
		background: linear-gradient(90deg, #FDE59B 0%, #FEC746 100%);
		color: #531900;
	}
	.btn1{
		background: gray;
		color: #531900;
	}
}
</style>
